<template>
    <nut-navbar @click-right="right" :fixed="true">
        <template #content>
            <nut-tabs v-model="tab2value" @click="changeTabList">
                <nut-tab-pane title="商品"> </nut-tab-pane>
                <nut-tab-pane title="评价"> </nut-tab-pane>
                <nut-tab-pane title="详情"> </nut-tab-pane>
            </nut-tabs>
        </template>
        <template #right>
            <HorizontalN class="right" width="16px" @click="showTop = true"></HorizontalN>
        </template>
        <template #left>
            <RectLeft class="left" width="16px" @click="toPreviousPageView"></RectLeft>
        </template>
    </nut-navbar>
    <div v-if="tab2value == 0">
        <GoodsView :goodsId="goodsId"/>
    </div>
    <div v-else-if="tab2value == 1">
        <CommentList />
    </div>
    <div v-else>
        <GoodsDetailView />
    </div>
    <nut-popup position="top" closeable :style="{ height: '20%' }" teleport-disable v-model:visible="showTop">
        <van-col offset="2">
            <div class="font">快捷入口</div>
        </van-col>
        <nut-row type="flex" justify="space-evenly" class="popup">
            <nut-col :span="4" align="center" @click="toFirstPageView">
                <IconFont name="home" size="30"></IconFont>
                <div>首页</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toGoodsType">
                <IconFont name="category" size="30"></IconFont>
                <div>分类</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toPublishView">
                <IconFont name="share-n" size="30"></IconFont>
                <div>发布闲置</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toMessageView">
                <IconFont name="message" size="30"></IconFont>
                <div>消息</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toPersonalView">
                <IconFont name="people" size="30"></IconFont>
                <div>个人主页</div>
            </nut-col>
        </nut-row>
    </nut-popup>
</template>
<script setup>
import { ref } from 'vue';
import { HorizontalN, RectLeft } from '@nutui/icons-vue';
import { useRoute, useRouter } from 'vue-router'; //路由器
import GoodsDetailView from './GoodsDetailView.vue';
import GoodsView from './GoodsView.vue';
import CommentList from './CommentListView.vue';
const route = useRoute();   //route路由对象
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const goodsId = ref(0);
goodsId.value = route.params.goodsId;
const tab2value = ref(0);
//显示弹出层
const showTop = ref(false);
//显示更多
const right = () => {
    console.log('更多');
}
const changeTabList = (tab) => {
    tab2value.value = tab.paneKey;
    console.log('当前被点击：', tab, tab2value.value)
};
//跳转到首页
function toFirstPageView() {
    router.push("/");
}
//跳转到商品分类页面
function toGoodsType() {
    router.push("/goodstype");
}
//跳转到发布闲置页面
function toPublishView() {
    router.push("/fabuxianzhi");
}
//跳转到消息页面
function toMessageView() {
    router.push("/messagelist");
}
//跳转到个人页面
function toPersonalView() {
    router.push("/personal");
}
//退回到上一个页面
function toPreviousPageView() {
    console.log('返回');
}
</script>
<style>
.font {
    position: relative;
    top: 20px;
}

.popup {
    position: relative;
    top: 50px;
}

:root {
    --nut-navbar-padding: 0 -20px;
}
</style>